<template>
  <div class='carmanAdmin'>
    <div class="Table-row">
      <div class="select-box">
        <div class="car-number child-input">
          <label for="car_num">车牌号:</label>
          <input class="input" placeholder="例如鄂A0001" type="text" v-model="car_num">
        </div>
        <div class='Address-flex child-input' @mouseleave='address_demo.address_list_show=false' @mouseenter='address_demo.address_list_show=true'>
          <label for='address'>地点分布:</label>
          <div class='address_demo input'>{{address_demo.name}}
            <i :class='address_demo.icon_status'></i>
            <div class='select-list' v-show='address_demo.address_list_show'>
              <ul>
                <li @click='choose_address(item)' v-for='(item, index) in address_demo.address_list' :key="index">
                  {{item.name}}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class='date-choose child-input'>
          <span class="f-l send-time">发送时间：</span>
          <div class="time-select-wrap">
              <!-- startTime -->
            <div class="input-group date time-item queryMSMPage-border" id="startTimeId">
              <input type="hidden" ref="startTimeRef" name="birthday">
              <input type="text" ref="startTimeRef" readonly="readonly" id="datetimepicker" class="form-control input-time-show" required="required" data-date-format="dd-mm-yyyy">
              <span class="input-group-addon span-time-icon">
                <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
            <!-- startTime end-->
            <!--<span class="f-l send-time">&nbsp;&#45;&#45;&nbsp;</span>-->
            <!-- endTime -->
            <div class="input-group date time-item queryMSMPage-border" id="endTimeId">
              <input type="hidden" ref="endTimeRef" name="birthday">
              <input type="text" ref="endTimeRef" readonly="readonly" id="endDatetimepicker" class="form-control input-time-show" required="required" data-date-format="dd-mm-yyyy">
              <span class="input-group-addon span-time-icon">
                <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
            <!-- endTime end-->
          </div>
        </div>
        <div class='btn-group btn-group-sm'>
          <button type="button" class='btn btn-default'>确定</button>
          <button type="button" class='btn btn-default'>重置</button>
        </div>
      </div>
      <div class='select-table car'>
        <ul>
          <li @click='carLook(item)' v-for='(item, index) in table_li_list' :key="index">
            <div class='li-wrap'>
              <div class='info-box'>
                <div class='status_img'>
                  <img src='../../../assets/images/wesf.png' alt=''>
                </div>
                <div class='rows'>
                  <i class='icon car'></i>
                  <span>{{item.car_info}}</span>
                </div>
                <div class='rows'>
                  <i class='icon people'></i>
                  <span>{{item.people}}</span>
                </div>
                <div class='rows'>
                  <i class='icon time'></i>
                  <span>{{item.time}}</span>
                </div>
                <div class='rows'>
                  <i class='icon address'></i>
                  <span>{{item.address}}</span>
                </div>
              </div>
              <div class='right_img'>
                <img src='../../../assets/images/imgs.png' alt=''>
              </div>
            </div>
            <div class='btn-group btn-group-sm'>
              <button type="button" class='btn btn-default'>车辆信息</button>
              <button type="button" class='btn btn-default'>重点人信息</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--表格翻页  -->
    <Pages
      v-show="table_info.all_totle !== 0"
      v-if="table_li_list"
      :showItem="5"
      :pageSize="20"
      :allDataSum="table_info.all_totle"
      :allpage="(Math.ceil(table_info.all_totle/20))"
      @current-change="tablePageData"
    >
    </Pages>

    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInDown"
      leave-active-class="animated fadeOutUp"
    >

      <div class="modal-ctrl-body" v-show="carInfo.isShow">
        <div class="modal-ctrl-main even-row-ctrl">
          <div class="modal-title">
            <p>车辆信息</p>
          </div>
          <div class="modal-ctrl-content">
            <div class="even-row">
              <div  class="modal-row" v-for="item in carInfo.list">
                <div class="modal-form-key f-l indispensable">
                  {{item.name}}：
                </div>
                <input v-if="item.name !=='重点人图像' && item.name !=='重点人车辆'" type="text" maxlength="16" disabled placeholder="最长16个字符" v-model="item.value" class="modal-text f-l">
                <img v-if="item.name =='重点人图像' || item.name =='重点人车辆'" class="stress-img" :src="item.value" />
              </div>
            </div>
          </div>
          <div class="btns text-r">
            <!--<button type="button" class="btn btn-default">取消</button>-->
            <button type="button" @click="carInfo.isShow = false" class="btn btn-info">确定</button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  import Pages from '@/components/sudoku/atom/pages'
  import moment from 'moment';
  export default {
    data () {
      return {
        carInfo: {
          isShow: false,
          list: [
            {
              name: '车牌号',
              value: '鄂A67510'
            },
            {
              name: '车辆类型',
              value: '鄂A67510'
            },
            {
              name: '所有人',
              value: '鄂A67510'
            },
            {
              name: '身份证号',
              value: '鄂A67510'
            },
            {
              name: '住址',
              value: '鄂A67510'
            },
            {
              name: '使用性质',
              value: '鄂A67510'
            },
            {
              name: '品牌型号',
              value: '鄂A67510'
            },
            {
              name: '车辆识别代码',
              value: '鄂A67510'
            },
            {
              name: '发动机号码',
              value: '鄂A67510'
            },
            {
              name: '注册日期',
              value: '鄂A67510'
            },
            {
              name: '注册单位',
              value: '鄂A67510'
            },
            {
              name: '违章记录简简述',
              value: '鄂A67510'
            },
            {
              name: '肇事事件简述',
              value: '鄂A67510'
            },
            {
              name: '重点人图像',
              value: '../../../assets/images/default.png'
            },
            {
              name: '重点人车辆',
              value: '../../../assets/images/imgs.png'
            },
          ]
        },
        car_num: '',
        address_demo: {
          name: '全部',
          id: 'all',
          icon_status: 'the-top',
          address_list_show: false,
          address_list: [
            {
              name: '全部',
              id: 'all'
            },
            {
              name: '汉口',
              id: 'hk'
            }
          ]
        },
        startTime: '',  // 起始时间
        endTime: '',    // 结束时间
        select_date: '',
        table_li_list: [],
        table_info: {
          page: 1,
          all_totle: 50
        },
      }
    },
    components: {
      Pages
    },
    methods: {
      tablePageData (data) {
        //console.log(data)
      },
      choose_address (data) {
        this.address_demo.name = data.name
        this.address_demo.id = data.id
        this.address_demo.address_list_show = false
      },
      // 时间控件初始化
      initTimeControl(){
        let self = this;
        $(function () {
          $('#startTimeId').datetimepicker({
            language: "zh-CN",
            format: "yyyy-mm-dd hh:ii:ss",
            endDate: new Date(),
            // minView: "month",
            autoclose: true
          }).on("changeDate",function(ev){
            let value = self.$refs.startTimeRef.value;
            if(value <= self.endTime){
              self.startTime = value;
            }else {
              this.s_alert('开始时间不能大于结束时间');
              self.$nextTick(function(){
                self.$refs.startTimeRef.value = self.startTime.replace('T', ' ').split('+')[0];
              })
            }
            //console.log(self.startTime);
            // //console.log(ev.date.valueOf());
          });
          $('#endTimeId').datetimepicker({
            language: "zh-CN",
            format: "yyyy-mm-dd hh:ii:ss",
            endDate: new Date(),
            // minView: "month",
            autoclose: true
          }).on("changeDate",function(ev){
            let value = self.$refs.endTimeRef.value;
            if(self.startTime <= value ){
              self.endTime = value;
            }else {
              this.s_alert('结束时间不能小于开始时间');
              self.$nextTick(function () {
                self.$refs.endTimeRef.value = self.endTime.replace('T', ' ').split('+')[0];
              })
            }
            ////console.log(ev.date.valueOf());
          });

          self.$refs.startTimeRef.value = moment().hour(0).format('YYYY-MM-DD hh:mm:ss');
          self.$refs.endTimeRef.value = moment().format('YYYY-MM-DD hh:mm:ss');
        });

      },
      init(){
        // this.s_alert(document.cookie.StationId)
        // 初始化时间
        this.startTime = moment().hour(0).format();
        this.endTime = moment().format();
        // 初始化时间控件
        this.initTimeControl();
      },
      carLook () {
        this.carInfo.isShow = true
      },
      renders () {
        for (var i = 0; i < 12; i++) {
          this.table_li_list.push({
            car_info: '鄂A2E010',
            people: '陈陈晨',
            time: '2018-10-16  14:56',
            address: '西北湖绿化广场',
            status_img: '../../../assets/images/wesf.png'
          })
        }
      }
    },
    mounted () {
      this.renders()
      this.init()
    }
  }
</script>

<style lang='less'>
  @import "../../../../static/css/carPerson.less";
  .glyphicon-calendar:before {
    content: "\1f4c5";
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>


